<template>
	<view class="coun">
		<u-navbar title="流速流量计算" :bgColor="bgColor" :autoBack="true" :placeholder="true"></u-navbar>
<!-- 		<view class="czinput">
			<view class="lebox">
				测线条数：
			</view>
			<view class="u_input">
				{{ceXiantiaoshu}}
			</view>
			<text class="texta">条测线</text>
		</view> -->
		<view class="" >
			<view class="" style="text-align: center;font-size: 45rpx;color: #43777c;">{{qudaoName}}</view>
		</view>
		<!-- <view class="" style="display: flex;align-items: center;justify-content: space-between;"> -->
		<u-row>
			<u-col span="6">
				<view class="czinput-aa">
					<view class="lebox">
						渠底宽度：
					</view>
					<view class="">
						{{bw}}
					</view>
					<!-- <text class="texta">条测线</text> -->
				</view>
			</u-col>
			<u-col span="6">
				<view class="czinput-aa">
					<view class="lebox">
						测线条数：
					</view>
					<view class="">
						{{ceXiantiaoshu}}
					</view>
					<!-- <text class="texta">条测线</text> -->
				</view>
			</u-col>
		</u-row>
		<view class="czinput">
			<view class="lebox">
				测量方法：
			</view>
			<view class="u_checkbox">
				<uni-data-checkbox @change="checkchange" v-model="ceDianshuliang" :localdata="fangfaatt" mode="tag"></uni-data-checkbox>
			</view>
			<!-- 			<view class="u_input">
				{{ceDianshuliang}}
			</view> -->
			<!-- <text class="texta">点法</text> -->
		</view>
		<view class="topitem" v-for="(item,index) in measuringArr" :key="index" v-if="ceDianshuliang == 1">
			<view class="">
<!-- 				<view class="rite">
					<view class="rt">
						{{index + 1}}
					</view>
					<view class="rb">
						号测线
					</view>
				</view> -->
				<view class="ite">
					<view class="bom">
						<!-- 测点{{index + 1}} -->
						{{index + 1}}B
					</view>
					<view class="top">
						<!-- 流速：{{i.dian}} -->
						<view style="width: 120rpx;">
							流速：
						</view>
						<view class="nam_imp">
							<u--input placeholder="请输入内容" border="surround" type="digit"
								v-model="item.aveTy"></u--input>
						</view>
					</view>
					<view class="itepjun">
						<view class="">
						{{item.aveTy}}
						</view>
						<view class="pjun">
							测线流速
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="topitem" v-for="(item,index) in measuringArr" :key="index" v-if="ceDianshuliang == 3">
			<view class="santiao">
<!-- 				<view class="rite">
					<view class="rt">
						{{index + 1}}
					</view>
					<view class="rb">
						号测线
					</view>
				</view> -->

				<view class="">
					<view class="ite">
						<view class="bom">
							<!-- 测点{{index + 1}} -->
							{{index + 1}}{{item.a.name}}
						</view>
						<view class="top">
							<!-- 流速：{{i.dian}} -->
							<view style="width: 120rpx;">
								流速：
							</view>
							<view class="nam_imp">
								<u--input placeholder="请输入内容" border="surround" type="digit" v-model="item.a.liusu"
									@change="changeIpFN"></u--input>
							</view>
						</view>
					</view>
					<view class="ite">
						<view class="bom">
							<!-- 测点{{index + 1}} -->
							{{index + 1}}{{item.b.name}}
						</view>
						<view class="top">
							<!-- 流速：{{i.dian}} -->
							<view style="width: 120rpx;">
								流速：
							</view>
							<view class="nam_imp">
								<u--input placeholder="请输入内容" border="surround" type="digit" v-model="item.b.liusu"
									@change="changeIpFN"></u--input>
							</view>
						</view>
					</view>
					<view class="ite">
						<view class="bom">
							<!-- 测点{{index + 1}} -->
							{{index + 1}}{{item.c.name}}
						</view>
						<view class="top">
							<!-- 流速：{{i.dian}} -->
							<view style="width: 120rpx;">
								流速：
							</view>
							<view class="nam_imp">
								<u--input placeholder="请输入内容" border="surround" type="digit" v-model="item.c.liusu"
									@change="changeIpFN"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="itepjun">
					<view class="">
					{{item.aveTy}}
					</view>
					<view class="pjun">
						测线流速
					</view>
				</view>
			</view>

		</view>
<!-- 		<view class="shuiinput">
			<text>渠道底宽：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输渠道底宽" type="digit" v-model="bw"></u--input>
			</view>
		</view> -->
		<view class="shuiinput">
			<text>输入水深：</text>
			<view class="" style="width: 440rpx;">
				<u--input placeholder="请输入水深" type="digit" v-model="wD"></u--input>
			</view>

		</view>
		<!-- 		<view class="liusliang">
			<text>等效流速：</text>
			<text class="text">{{channelArea}}</text>
		</view> -->
		<view class="liusliang">
			<text>总流量：</text>
			<text class="text">{{liusliangnub}}</text>
		</view>
		<view class=""
			style="width: 690rpx;display: flex;justify-content: space-around;align-items: center;margin: 30rpx 0 50rpx 0;">
			<view class="" style="width: 600rpx;">
				<u-button @click="calculateFlow" color="#5a9fa6" type="primary" shape="circle" text="开始计算"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fangfaatt: [{
					"value": 1,
					"text": "一点法"
				}, {
					"value": 3,
					"text": "三点法"
				}],
				liusliangnub: 0,
				wD: 0,
				cezhanObj: {},
				cexianlist: [],
				ceDianshuliang: 1,
				ceXiantiaoshu: 0,
				areaAll: 0,
				channelArea: 0,
				bw: 0,
				vmR: 0,
				vmL: 0,
				measuringArr: [],
				bgColor: '#f4f6f8',
				morencefa: 1,
				toolName: ''
			}
		},
		onLoad(option) {
			this.toolName = option.toolName
			// 测站信息
			this.dataFormat()
			this.createArrayFn()
		},
		onShow() {
			//渠道底宽
			this.bw = this.cezhanObj.qudikuandu
		},
		methods: {
			// 处理数据格式
			dataFormat() {
				let obj = this.vuex_cezhanInfo
				let elect = {}
				if (this.toolName == '单轨测流车') {
					elect = obj.duopuleche
					elect.cexianlist = obj.duopuleche.cexianList
				}
				if (this.toolName == '索道式测流车') {
					elect = obj.suodaoche
					elect.cexianlist = obj.suodaoche.cexianList
				}
				if (this.toolName == '轨道式测流车') {
					elect = obj.guidaoche
					elect.cexianlist = obj.guidaoche.cexianList
				}
				if (this.toolName == '计时计数器') {
					elect = obj.celiugan
					elect.cexianlist = obj.celiugan.cexianList
				}
				this.vuexCezhanInfo = elect
				this.qudaoName = obj.name
				console.log('选择测量仪器', this.toolName);
				console.log('原始数据', obj);
				console.log('格式化数据', elect);
				this.cezhanObj = elect
				this.ceXiantiaoshu = elect.cexiantiaoshu
				this.dianfa = this.morencefa
			},
			checkchange(e){
				console.log('e',e.detail.value);
				this.dianfa = e.detail.value
				this.createArrayFn()
			},
			// 计算测线平均流速
			changeIpFN() {
				let arr = this.measuringArr
				for (let i = 0; i < arr.length; i++) {
					arr[i].aveTy = ((arr[i].a.liusu * 1 + arr[i].b.liusu * 1 + arr[i].c.liusu * 1) / 3).toFixed(3)
				}
				console.log('arr', arr);
			},
			// 创建数组
			createArrayFn() {
				this.ceDianshuliang = this.dianfa
				// 测线条数
				let ceTiao = this.cezhanObj.cexianlist.length
				let arrList = []
				if (this.dianfa == 3) {
					for (let i = 0; i < ceTiao; i++) {
						let obj = {
							aveTy: 0,
							a: {
								name: 'A',
								time: '',
								nub: '',
								evenness: '',
								liusu: ''
							},
							b: {
								name: 'B',
								time: '',
								nub: '',
								evenness: '',
								liusu: ''
							},
							c: {
								name: 'C',
								time: '',
								nub: '',
								evenness: '',
								liusu: ''
							},
							status: 0,
						}
						arrList.push(obj)
					}
				} else if (this.dianfa == 1) {
					for (let i = 0; i < ceTiao; i++) {
						let obj = {
							aveTy: '',
							b: '',
							status: '',
							time: '',
							nub: '',
							evenness: ''
						}
						arrList.push(obj)
					}
				}
				this.measuringArr = arrList
				console.log('measuringArr', this.measuringArr);
			},
			// 计算平均流速
			clijisu() {

				console.log('测线');

			},
			// 计算流量
			calculateFlow() {
				this.cezhanObj.qudikuandu = this.bw
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'fail',
						title: '水深未输入',
						duration: 1500
					});
					return
				}
				console.log('测站', this.cezhanObj);
				let vls = this.measuringArr
				// let vls = [{
				// 	aveTy: "0.972"
				// }, {
				// 	aveTy: "1.089"
				// }, {
				// 	aveTy: "1.061"
				// }, {
				// 	aveTy: "1.053"
				// }, {
				// 	aveTy: "1.042"
				// }, {
				// 	aveTy: "1.049"
				// }, {
				// 	aveTy: "1.004"
				// }, {
				// 	aveTy: "0.928"
				// }, {
				// 	aveTy: "0.955"
				// }, ]
				// console.log('vls', vls);
				let vlAll = []
				let vl0 = null //区域流量
				let vl1 = null //区域流量
				let vlz = null //区域流量
				let vln = null //区域流量
				let vln1 = null //区域流量
				let vln2 = null //区域流量

				// 不参与循环
				// cot
				let sin27LL = Math.sin(this.cezhanObj.lSA * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA * Math.PI / 180)
				let areaLL = cos27LL / sin27LL //三角面积L

				let sin27RR = Math.sin(this.cezhanObj.rSA * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA * Math.PI / 180)
				let areaRR = cos27RR / sin27RR //三角面积R
				// VL0
				vl0 = 0.5 * this.wD * this.wD * areaLL * (vls[0].aveTy * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1)
				console.log('vl0', vl0);


				//VL1
				vl1 = 0.5 * [(vls[0].aveTy * 1) + (vls[0].aveTy * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1)
				console.log('vl1', vl1);

				// 中间逻辑
				if (vls.length > 1) {
					for (let i = 0; i < vls.length - 1; i++) {
						vlz = 0.5 * [(vls[i].aveTy * 1) + (vls[i + 1].aveTy * 1)] * (this.wD) * [(this.cezhanObj
							.cexianlist[i + 1].cR * 1) - (this.cezhanObj.cexianlist[i].cR *
							1)]
						vlAll.push(vlz.toFixed(6) * 1)
					}
				}

				//VLN+1
				vln1 = 0.5 * [(vls[vls.length - 1].aveTy * 1) + (vls[vls.length - 1]
					.aveTy * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length - 1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1)
				console.log('vln1', vln1);


				//VLN+2
				vln2 = 0.5 * this.wD * this.wD * areaRR * (vls[vls.length - 1].aveTy * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1)
				console.log('vln2', vln2, areaRR);
				// 计算总平均流速
				let vlQitem = []
				let vlQArr = []
				let vlQALL = []

				// let arrtrst = [
				// 	1,
				// 	2.204,
				// 	2.298,
				// 	2.26,
				// 	2.241,
				// 	2.236,
				// 	2.196,
				// 	2.065,
				// 	2.014,
				// 	0.983,
				// ]
				let sum = 0;
				for (let i = 0; i < vlAll.length; i++) {
					sum += vlAll[i];
				}
				// let sum = 0;
				// for (let i = 0; i < arrtrst.length; i++) {
				// 	sum += arrtrst[i];
				// }
				this.liusliangnub = sum.toFixed(3) * 1
				console.log('流量数组', vlAll, this.cezhanObj.cexianlist);
				console.log('流量', sum.toFixed(3) * 1);
			}
		}
	}
</script>
<style scoped lang="scss">
	.coun {
		padding: 30rpx;
		.itepjun {
			text-align: center;
			font-size: 40rpx;
			background-color: #75b9ac;
			border-bottom: 10rpx solid #60988d;
			border-radius: 20rpx;
			padding: 0 20rpx;
			color: #000;
			.pjun {
				text-align: center;
				
				color: #ffffff;
				font-size: 30rpx;
				
			}
		}
		.santiao {
			display: flex;
			align-items: center;
		}

		.topitem {
			// width: 650rpx;
			// height: 180rpx;
			// padding: 20rpx;
			margin-bottom: 10rpx;
			border-radius: 50rpx;
			border-bottom: #ffffff solid 1rpx;
			box-shadow: 0rpx 0rpx 20rpx 5rpx #d5dce5;
			background-color: #f4f6f8;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.ite {
				// width: 160rpx;
				// line-height: 60rpx;
				// text-align: center;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				// background-color: #f0cfb9;
				.top {
					display: flex;
					align-items: center;
					margin: 5rpx 15rpx;
					font-size: 35rpx;
					color: #000000;
					// background-color: #b9f08b;
					.nam_imp {
						width: 200rpx;
						// background-color: #00ffff;
					}
				}

				.bom {
					// width: 50rpx;
					// height: 50rpx;
					padding: 5rpx 10rpx 10rpx 15rpx;
					margin: 6rpx 10rpx;
					text-align: center;
					// line-height: 50rpx;
					font-size: 40rpx;
					border-radius: 20rpx;
					letter-spacing: 10rpx;
					color: #ffffff;
					background-color: #5a81c8;
				}

				
			}

			.rite {
				text-align: center;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 0 30rpx 0;

				.rt {
					width: 60rpx;
					height: 60rpx;
					text-align: center;
					color: #ffffff;
					border-radius: 100rpx;
					border: #fff solid 2rpx;
					background-color: #ff9727;
					box-shadow: 5rpx 5rpx 20rpx #ffaf69;

				}

				.rb {
					margin-left: 20rpx;
					font-size: 50rpx;
					color: #747a83;
				}
			}
		}

	}

	.liusliang {
		font-family: 'MyFont';
		// background-color: #e6f2f4;
		border: #fff solid 2rpx;
		padding: 20rpx 0 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
		display: flex;
		align-items: center;

		// justify-content: center;
		.text {
			font-size: 80rpx;
		}
	}

	.shuiinput {
		display: flex;
		align-items: center;
		height: 120rpx;
		// justify-content: center;
		border: #fff solid 2rpx;
		padding-left: 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		color: #43777c;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx 5rpx #dfe6f0;
	}

	.czinput {
		color: #43777c;
		font-size: 40rpx;
		padding: 20rpx 20rpx;
		// color: #2dbfae;
		display: flex;
		align-items: center;
		// background-color: #ffffff;
		border-bottom: 1rpx solid #e8e8e8;
		border-radius: 0rpx;
		margin-bottom: 20rpx;

		.u_input {
			padding: 0 20rpx;
			border-radius: 10rpx;
			background-color: #3d4c64;
			color: #00ffff;
		}
		.u_checkbox {
			display: flex;
			align-items: center;
		}

		.texta {
			margin-left: 30rpx;
		}

		.lebox {
			width: 250rpx;
			// background-color: #ffaaff;
		}
	}
	.czinput-aa {
		color: #43777c;
		font-size: 40rpx;
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e8e8e8;
		border-radius: 0rpx;
		// margin-bottom: 20rpx;
		.lebox {
			// width: 250rpx;
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #f4f6f8;
	}
</style>